<template>
<view>
<view class="main">
	<map :longitude="markers[0].longitude" :latitude="markers[0].latitude" scale="16" class="map" :markers="markers"></map>
	<view class="body">
		<view class="head">
			<view class="title">{{ detailMsg.com_name }}</view>
			<view class="contact flex row-between">
				<view class="addr">
					<text>{{ detailMsg.com_addr }}</text>

					<view>{{ detailMsg.classname }}</view>
				</view>
				<view class="tel" @tap="call" v-if="detailMsg.com_tel">
					<image class="phone" src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204141507_87185.png" mode>
					</image>
					<view>电话</view>
				</view>
			</view>
		</view>
		<view class="time border" v-if="detailMsg.com_yytime">
			<view class="title">办公时间</view>
			<text>{{ detailMsg.com_yytime }}</text>
		</view>
		<view class="range border" v-if="detailMsg.work">
			<view class="title">业务范围</view>
			<text>{{ detailMsg.work }}</text>
		</view>
		<view class="service border" v-if="detailMsg.service">
			<view class="title">办事指南</view>
			<view class="service-list">
				<navigator class="service-item flex row-between navigator" :v-for="detailMsg.service" :key="index" :url="'../range/range?classname=' + item.title">
					<text>{{ item.title }}</text>
					<image src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203182821_35935.png" class="arrow-right" mode>
					</image>
				</navigator>
			</view>
			<view class="more" v-if="detailMsg.more" @tap="more">
				查看更多
				<image src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203182833_11867.png" class="arrow-down" mode>
				</image>
			</view>
		</view>
		<button class="back flex row-between border navigator" open-type="feedback">
			<view class="back-content">
				<view class="title">问题反馈</view>
				<text style="line-height:48rpx">进入后请选“功能异常”反馈信息有误等问题</text>
			</view>
			<image src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203182821_35935.png" class="arrow-right" mode>
			</image>
		</button>
		<navigator url="/pages/tools/wangdian/index/index">
		<button class="wangdian-btn border">
			查询更多网点 <image src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203182821_35935.png" class="arrow-right" mode></image>
		</button>
	</navigator>
	</view>

	<view class="control flex around">
		<!-- <button class="control-item {{collect ?'collect':'' }}"  bindtap="collection">
				<image wx:if="{{!collect}}" src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203185746_13857.png" mode=""></image>
				<text>{{ collect ? '已收藏' : '收藏' }}</text>
			</button> -->
		<button class="control-item" open-type="share">
			<image src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204141527_64241.png" mode></image>
			<text>分享</text>
		</button>
		<button class="control-item to" @tap="addrDetail">
			<image src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204141538_23411.png" mode></image>
			<text>前往</text>
		</button>
	</view>
</view>
<mp-dialog title="点击号码拨打，如未能识别请长按复制到手机拨打" :show="showPhone" @buttontap="tapDialogButton" :buttons="[{text: '关闭'}]">
	<text v-for="(item, index) in phoneArr" :key="index" :user-select="true" :style="'color:' + (item.type=='phone'?'#12b7f5':'#333')" @tap="item.type=='phone'?'remarkMakePhoneCall':''" :data-phone="item.type=='phone'?item.val:''">{{item.val}}</text>
</mp-dialog>
</view>
</template>

<script>
// pages/detail/detail.js
var app = getApp();
const util = require("../../../../utils/util.js");
let detailId;
let toggleCollection = true;
import mpDialog from "./weui-miniprogram/dialog/dialog";

export default {
  data() {
    return {
      markers: [{
        latitude: 22.565000,
        longitude: 114.172490,
        name: "本地宝",
        reload: false,
        desc: "深圳本地宝有限公司"
      }],
      scroll: false,
      showPhone: false,
      //电话弹框
      collect: false //收藏按钮
      ,
      phoneArr: [],
      detailMsg: ""
    };
  },

  components: {
    mpDialog
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: '网点详情'
    });
    detailId = options.detailId;
    util.getUrl(app.globalData.url).then(res => {
      this.getDetailData();
    });
    util.location();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: `本地宝-网点详情-${this.detailMsg.classname}-${this.detailMsg.com_name}`,
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      path: '/pages/tools/wangdian/detail/detail' + detailId
    };
  },
  methods: {
    // 关闭电话弹框
    tapDialogButton() {
      this.setData({
        showPhone: false
      });
    },

    getDetailData: function () {
      var data = {
        action: 'service',
        id: detailId
      };
      util.request('network.php', data, 'POST').then(res => {
        var detailMsg = res.data[0];
        let mapLocation = this.bMapTransQQMap(detailMsg.com_jd, detailMsg.com_wd);
        this.setData({
          detailMsg,
          phoneArr: this.mobilePhoneArray(detailMsg.com_tel),
          markers: [{
            latitude: mapLocation['lat'],
            longitude: mapLocation['lng'],
            name: detailMsg.com_name
          }]
        });
        toggleCollection = true;
      });
    },
    addrDetail: function () {
      if (this.detailMsg.com_wd && this.detailMsg.com_jd) {
        let plugin = requirePlugin('routePlan');
        let key = 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'; //使用在腾讯位置服务申请的key

        let referer = '本地宝'; //调用插件的app的名称

        let endPoint = JSON.stringify({
          //终点
          'name': this.detailMsg.com_name,
          'latitude': this.markers[0].latitude,
          'longitude': this.markers[0].longitude
        });
        uni.navigateTo({
          url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=1'
        });
      } else {
        uni.showToast({
          title: '该地点暂无导航',
          icon: 'none'
        });
      }
    },
    call: function () {
      this.setData({
        showPhone: true
      });
    },

    remarkMakePhoneCall(e) {
      let phoneNumber = util.getValue('phone', e);
      uni.makePhoneCall({
        phoneNumber
      });
    },

    /**分割出字符串中的手机号*/
    mobilePhoneArray(strContent) {
      if (!strContent) {
        return;
      }

      var mobileReg = /[1][3,4,5,7,6,8,9][0-9]{9}|\d{3,4}-\d{7,8}|[0]\d{9,11}|\d{7,8}/g;
      var telephoneReg;
      var phoneList = strContent.match(mobileReg) || [];
      var textList = strContent.split(/[1][3,4,5,7,6,8,9][0-9]{9}|\d{3,4}-\d{7,8}|[0]\d{9,11}|\d{7,8}/),
          list = [];

      for (var i in textList) {
        if (textList[i] == '') {
          i == 0 && list.push({
            type: 'phone',
            val: phoneList[0]
          });
        } else {
          list.push({
            type: 'text',
            val: textList[i]
          });
          list.push({
            type: 'phone',
            val: phoneList[i]
          });
        }
      }

      return list;
    },

    // 百度地图的经纬度转腾讯地图经纬度
    bMapTransQQMap(lng, lat) {
      let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
      let x = lng - 0.0065;
      let y = lat - 0.006;
      let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
      let lngs = z * Math.cos(theta);
      let lats = z * Math.sin(theta);
      return {
        lng: lngs,
        lat: lats
      };
    },

    guide() {
      uni.navigateTo({
        url: '../contactPage?guide=1'
      });
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    },

    more() {
      console.log("占位：函数 more 未声明");
    }

  }
};
</script>
<style>

.navigator {
  background-color: transparent;
}
.map {
  width: 100%;
  height: 450rpx;
  margin-bottom: 10rpx;
}
.title {
  margin-bottom: 18rpx;
  color: #252525;
  font-weight: bold;
  font-size: 36rpx;
  text-align: left;
}
.arrow-right {
  width: 12rpx;
  height: 20rpx;
}
.arrow-down {
  width: 20rpx;
  height: 12rpx;
  margin-left: 14rpx;
}
.main {
  background-color: #f9f9f9;
  font-size: 30rpx;
}
.main .body {
  padding-bottom: 138rpx;
  background-color: #f9f9f9;
  z-index: 2;
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;
  overflow-x: hidden;
  border-bottom: 10rpx solid #f9f9f9;
}
.main .body .head {
  padding: 0 44rpx;
  padding-top: 40rpx;
  padding-bottom: 20rpx;
  margin-bottom: 2rpx;
  color: #232323;
  background-color: #fff;
}
.main .body .head .contact .tel {
  flex-shrink: 0;
  color: #838383;
  text-align: center;
}
.main .body .head .contact .tel .phone {
  width: 54rpx;
  height: 54rpx;
  margin-bottom: 6rpx;
}
 button{
  font-size: 30rpx;
  background-color: #fff;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
.main .body .border {
  margin: 0 14rpx;
  margin-top: 12rpx;
  padding: 28rpx 26rpx;
  color: #232323;
  background-color: #fff;
  border-radius: 20rpx;
}
.main .body .border .service-list .service-item {
  margin-bottom: 32rpx;
}
.main .body .border .more {
  text-align: center;
}
.main .control {
  position: fixed;
  width: 100%;
  height: 118rpx;
  bottom: 0;
  line-height: 118rpx;
  background-color: #fff;
  z-index: 2;
  font-size: 30rpx;
}
.main .control .control-item {
  height: 66rpx;
  padding: 0 40rpx;
  line-height: 66rpx;
  color: #232323;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}
.main .control .control-item image {
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
}
.main .control .collect {
  color: #fff;
  background-color: #f60;
}
.main .control .to {
  color: #fff;
  background-color: #37f;
}

</style>